<template>
  <div>
    <!-- <div style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)" v-if="userName !== 'admin'">
        <img src="../../assets/img/pageError.png" style="width: 400px;" />
        <div style="display: flex;justify-content: center;">
            <el-link type="info">暂无权限 :）</el-link>
        </div>
    </div> -->
    <div class="main">
      <el-card style="margin-bottom: 20px;">
        <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
          <div>
            <span>按日期搜索：</span>
            <el-date-picker size="small" v-model="dataSearchTime" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" @change="dataSearchTimeChange">
            </el-date-picker>
          </div>
          <!-- <div @click="save">导出</div> -->

        </div>
        <el-row :gutter="20">
          <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="countContainer">
              <div class="coutTitle">采购付款总额:</div>
              <div>
                <countTo :startVal="0" :decimals="2"
                         style="font-size: 24px;font-weight:800;color:#ff6a00" :endVal="purchaseAmount">
                </countTo>
              </div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="countContainer">
              <div class="coutTitle">采购已付总额:</div>
              <div>
                <countTo :startVal="0" :decimals="2"
                         style="font-size: 24px;font-weight:800;color:#ff6a00" :endVal="purchasePaidAmount">
                </countTo>
              </div>
            </div>

          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="countContainer">
              <div class="coutTitle">门店总数:</div>
              <div>
                <countTo :startVal="0" style="font-size: 24px;font-weight:800;color:#ff6a00"
                         :endVal="storeNums"></countTo>
              </div>

            </div>

          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="countContainer">
              <div class="coutTitle">材料毛利:</div>
              <div>
                <countTo :startVal="0" :decimals="2"
                         style="font-size: 24px;font-weight:800;color:#ff6a00" :endVal="materialGrossProfit">
                </countTo>
              </div>

            </div>

          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="countContainer">
              <div class="coutTitle">销售总额:</div>
              <div>
                <countTo :startVal="0" :decimals="2"
                         style="font-size: 24px;font-weight:800;color:#ff6a00" :endVal="saleAmount">
                </countTo>
              </div>

            </div>

          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="4" :xl="4">
            <div class="countContainer" @click="standBy">
              <div class="coutTitle">待办事项: <span style="font-size: 12px;color:#787878;">(点击可查看)</span>
              </div>
              <div>
                <countTo :startVal="0" style="font-size: 24px;font-weight:800;color:#ff6a00"
                         :endVal="0"></countTo>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--        首页10个数据表格-->
        <div v-loading="showData">
          <div class="centerData" style="display: flex;justify-content: space-between">
            <!--门店数量-->
            <el-table
              border
              show-summary
              :data="storeCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;font-weight: bold;font-size: 12px !important;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="门店数量(单位/家)">
                <el-table-column
                  prop="storeNameCount"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
            <!--          销售额（不含灯具）-->
            <el-table
              border
              show-summary
              :data="elseCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;margin-left: 20px;font-weight: bold;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="销售额（不含灯具）">
                <el-table-column
                  prop="saleTotal"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
            <!--          成本-->
            <el-table
              border
              show-summary
              :data="elseCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;margin-left: 20px;font-weight: bold;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="成本（单位/元）">
                <el-table-column
                  prop="saleCostTotal"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="centerData" style="display: flex;justify-content: space-between">
            <!--共同承担-->
            <el-table
              border
              show-summary
              :data="gtcdFeeList"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;font-weight: bold;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="共同承担(单位/元)">
                <el-table-column
                  prop="gtcdFee"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
            <!--          销售装车费-->
            <el-table
              border
              show-summary
              :data="storeCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;font-weight: bold;font-size: 12px !important;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="销售装车费(单位/元)">
                <el-table-column
                  prop="transportCount"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
            <!--灯具销售额-->
            <el-table
              border
              show-summary
              :data="elseCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;margin-left: 20px;font-weight: bold;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="灯具销售额(单位/元)">
                <el-table-column
                  prop="djTotalPrice"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="centerData" style="display: flex;justify-content: space-between">
            <!--灯具利润-->
            <el-table
              border
              show-summary
              :data="elseCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;font-weight: bold;font-size: 12px !important;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="灯具利润(单位/元)">
                <el-table-column
                  prop="djProfit"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
            <!--          公司承担）-->
            <el-table
              border
              show-summary
              :data="companyCdFeeList"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white' ,'font-size':'16px'}"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;margin-left: 20px;font-weight: bold;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="公司承担（单位/元）">
                <el-table-column
                  prop="companyCdFee"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
            <!--          补贴费用-->
            <el-table
              border
              show-summary
              :data="subFeeVOList"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '500', 'background': '#ff6a00', 'color': 'white','font-size':'16px' }"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;margin-left: 20px;font-weight: bold;">
              <el-table-column
                prop="warehouseName"
                label="仓库"
                width="150">
              </el-table-column>
              <el-table-column label="补贴费用（单位/元）">
                <el-table-column
                  prop="subFee"
                  :label='storeCountDate'
                >
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="centerData" style="display: flex;justify-content: space-between">
            <!--          利润分成-->
            <el-table
              border
              :data="profitCount"
              :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white' ,'font-size':'16px'}"
              :cellStyle="{ 'textAlign': 'center' ,'fontSize': '14px'}"
              style="width: 30%;margin-top: 20px;font-weight: bold;">
              <el-table-column
                prop="dataName"
                label="利润分类"
                width="280">
              </el-table-column>
              <el-table-column label="利润分成（单位/元）">
                <el-table-column
                  prop="dataCount"
                  :label='storeCountDate'
                >
                  <template slot-scope="scope">
                    <div style="color: red;display: flex;flex-direction: column" v-if="scope.row.dataName==='曹总给公司'">
                      <!--                      <span>{{ toCompany }}</span>-->
                      <span>{{ scope.row.dataCount }}</span>
                      <span style="font-size: 12px;color:#999999">(材料毛利-销售装车费-共同承担费)*0.6-补贴费-公司承担费-门窗路费补贴</span>
                    </div>
                    <div v-else>
                      {{ scope.row.dataCount }}
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <div style="margin-bottom:20px"><span style="margin-right: 10px;color:red">*</span>库存告警 <span
              style="margin-left: 5px;color: #787878;font-size: 12px">(此表格为库存告警的材料汇总,请添加库存!)</span>
            </div>
            <div class="selectChoose">
              <!--              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList()"> 默认数据-->
              <!--              </el-button>-->
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(1)"> 宁乡仓
              </el-button>
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(11)"> 贵州仓
              </el-button>
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(10)"> 重庆仓
              </el-button>
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(4)"> 广西仓
              </el-button>
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(2)"> 广东仓
              </el-button>
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(7)"> 河南仓
              </el-button>
              <el-button size="small" style="background:#ff6a00;color: white" @click="chooseAlarmList(5)"> 云南仓
              </el-button>
            </div>
            <el-table maxHeight="500px" element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading" v-loading="AlarmLoading" :data="InventoryAlarmList"
                      border style="width: 100%"
                      :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white' }"
                      :cellStyle="{ 'textAlign': 'center' ,'fontSize': '12px'}">
              <el-table-column prop="name" :label="'材料名称('+warehouseName+')'" min-width='200'></el-table-column>
              <el-table-column prop="inventoryStoreCount" label="可用店铺数量"></el-table-column>
              <el-table-column label="状态" min-width="100">
                <template slot-scope="scope">
                  <div v-if="chooseWareHouseId == 1 || chooseWareHouseId == 10">
                    <el-link v-if="scope.row.inventoryStoreCount < 50"
                             type="danger">预警
                    </el-link>
                    <el-link v-else>正常</el-link>
                  </div>
                  <div v-else>
                    <el-link v-if="scope.row.inventoryStoreCount  < 30"
                             type="danger">预警
                    </el-link>
                    <el-link v-else>正常</el-link>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>

        </el-row>

      </el-card>
      <el-card>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="height:550px">
            <echart :echartsData="option1"></echart>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="height:550px">
            <echart :echartsData="option2"></echart>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="height:550px">
            <echart :echartsData="option3"></echart>
          </el-col>
        </el-row>
        <el-row style="margin-top: 50px;">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="height:500px">
            <echart :echartsData="option4"></echart>
          </el-col>
        </el-row>

      </el-card>
    </div>
    <el-dialog :visible.sync="standByStatus" title="待办事项" width="80vw">
      <el-table maxHeight="500px" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                :data="standByList" border style="width: 100%"
                :headerCellStyle="{ 'textAlign': 'center', 'fontWeight': '400', 'background': '#ff6a00', 'color': 'white' }"
                :cellStyle="{ 'textAlign': 'center' ,'fontSize': '12px'}">
        <el-table-column prop="name" label="事项" min-width="150px"></el-table-column>
        <el-table-column prop="remark" label="备注" min-width="200px"></el-table-column>
        <el-table-column prop="user" label="申请人"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" min-width="150px"></el-table-column>
        <el-table-column label="处理状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0">未处理</el-tag>
            <el-tag v-else-if="scope.row.status == 1">已处理</el-tag>
            <el-tag v-else-if="scope.row.status == 2">驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" style="margin-right: 10px;">驳回</el-button>
            <el-button style="background-color: #ff6a00;color:white" size="small">完成</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>

import quinn from "@/utils/quinn";
import echart from "@/RayComponents/echart.vue";
import countTo from 'vue-count-to';
import dayjs from "dayjs";
import XLSX from 'xlsx-js-style';
import Decimal from 'decimal.js';

export default {
  meta: { title: "数据详情", icon: "el-icon-menu", sort: 1, authority: 100 },
  name: "index",
  components: {
    echart,
    countTo
  },
  watch: {
    "$store.state.warehouseList": {
      handler(newVal) {
        this.warehouseList = newVal;
        // this.checkboxGroup[0]= this.warehouseList[0].warehouseId
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      userName: '',
      warehouseList: [],
      showData: true,
      toCompany: "",
      checkWarehouseGroup: [],
      dataSearchTime: [],
      startTime: '',
      endTime: '',
      AlarmLoading: false,
      chooseWareHouseId: 1,
      warehouseName: "宁乡仓",
      standByStatus: false,//待办事项
      loading: false,
      purchaseAmount: 0,
      purchasePaidAmount: 0,
      storeNums: 0,
      saleAmount: 0,
      materialGrossProfit: 0,
      InventoryAlarmList: [],
      companyCdFeeList: [],
      gtcdFeeList: [],
      subFeeVOList: [],
      storeCount: [],
      elseCount: [],
      profitCount: [
        // {
        //   profitName: "材料毛利（不含灯具）",
        //   count: "320"
        // }, {
        //   profitName: "销售装车费",
        //   count: "223"
        // }, {
        //   profitName: "共同承担费",
        //   count: "123"
        // }, {
        //   profitName: "净利润",
        //   count: "450"
        // }, {
        //   profitName: "公司分0.6",
        //   count: "645"
        // }, {
        //   profitName: "曹总分0.4",
        //   count: "421"
        // }, {
        //   profitName: "门店补贴费",
        //   count: "212"
        // }, {
        //   profitName: "公司承担费",
        //   count: "212"
        // }, {
        //   profitName: "灯具利润（给曹总）",
        //   count: "212"
        // }, {
        //   profitName: "门窗路费补贴",
        //   count: "212"
        // }, {
        //   profitName: "曹总给公司",
        //   count: "212"
        // },
      ],
      storeCountDate: "",
      standByList: [
        {
          'name': '申请销售单删除',
          'remark': '填错了 但是没出库 请帮忙删除一下',
          'user': '肖娇',
          'createTime': '2024-04-20 12:22:31',
          'status': 0,
          'type': 'saleList'
        },
        {
          'name': '申请销售单删除',
          'remark': '填错了 但是没出库 请帮忙删除一下',
          'user': '肖娇',
          'createTime': '2024-04-20 12:22:31',
          'status': 0,
          'type': 'saleList'
        },
        {
          'name': '申请销售单删除',
          'remark': '填错了 但是没出库 请帮忙删除一下',
          'user': '肖娇',
          'createTime': '2024-04-20 12:22:31',
          'status': 0,
          'type': 'saleList'
        },
        {
          'name': '申请销售单删除',
          'remark': '填错了 但是没出库 请帮忙删除一下',
          'user': '肖娇',
          'createTime': '2024-04-20 12:22:31',
          'status': 0,
          'type': 'saleList'
        },
        {
          'name': '申请销售单删除',
          'remark': '填错了 但是没出库 请帮忙删除一下',
          'user': '肖娇',
          'createTime': '2024-04-20 12:22:31',
          'status': 0,
          'type': 'saleList'
        }
      ],
      option1: {
        title: {
          text: '及格率排行'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 设置饼图的半径
            data: [
              { value: 235, name: '视频广告' },
              { value: 274, name: '联盟广告' },
              { value: 310, name: '邮件营销' },
              { value: 335, name: '直接访问' },
              { value: 400, name: '搜索引擎' }
            ]
          }
        ],
        toolbox: {
          feature: {

            saveAsImage: { show: true }
          }
        },
      },
      option2: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Email',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Search Engine',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: 'series'
            },
            markLine: {
              lineStyle: {
                type: 'dashed'
              },
              data: [[{ type: 'min' }, { type: 'max' }]]
            }
          },
          {
            name: 'Baidu',
            type: 'bar',
            barWidth: 5,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: 'Google',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: 'Bing',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: 'Others',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      },
      option3: {
        title: {
          text: '及格率排行'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      },
      option4: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      }
    }
  },
  methods: {
    save() {


// 创建一个工作簿
      const wb = XLSX.utils.book_new();

// 创建数据
      const data = [
        ["姓名", "年龄", "职业"],
        ["Alice", 28, "Engineer"],
        ["Bob", 22, "Designer"]
      ];

// 构建工作表
      const ws = XLSX.utils.aoa_to_sheet(data);

// 自定义样式
      const font = { name: "Arial", bold: true };
      const alignment = { vertical: "cneter", horizontal: "center" };

// 应用样式到第一行（标题行）
      XLSX.utils.sheet_add_aoa(ws, [["姓名", "年龄", "职业"]], {
        fill: { bgColor: { indexed: 64 } },
        font: font,
        alignment: alignment
      });

// 应用样式到其他行
      XLSX.utils.sheet_add_aoa(ws, data.slice(1), {
        font: font,
        alignment: alignment
      });

// 设置单元格宽度
      ws["A1"].s = {
        alignment: { textRotation: 0 },
        font: font,
        fill: { bgColor: { indexed: 64 } },
        border: {
          top: { style: "thin" },
          left: { style: "thin" },
          bottom: { style: "thin" },
          right: { style: "thin" }
        }
      };
      ws["B1"].s = {
        alignment: { textRotation: 0 },
        font: font,
        fill: { bgColor: { indexed: 64 } },
        border: {
          top: { style: "thin" },
          left: { style: "thin" },
          bottom: { style: "thin" },
          right: { style: "thin" }
        }
      };
      ws["C1"].s = {
        alignment: { textRotation: 0 },
        font: font,
        fill: { bgColor: { indexed: 64 } },
        border: {
          top: { style: "thin" },
          left: { style: "thin" },
          bottom: { style: "thin" },
          right: { style: "thin" }
        }
      };

// 写入工作表
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

// 导出工作簿
      XLSX.writeFile(wb, "styled_data.xlsx");
    },
    standBy() {
      this.standByStatus = true;
    },
    dataSearchTimeChange() {
      if (this.dataSearchTime) {
        this.startTime = dayjs(this.dataSearchTime[0]).format('YYYY-MM-DD');
        this.endTime = dayjs(this.dataSearchTime[1]).format('YYYY-MM-DD');
        this.storeCountDate = this.startTime + '至' + this.endTime
      } else {
        this.startTime = ''
        this.endTime = ''
        this.storeCountDate = '--至' + new Date().toLocaleDateString()
      }
      this.getData();
      this.getDataBar()
    },
    warehouseSelect() {
      this.getData()
    },
    searchPreData() {
    },
    getData() {
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        warehouseList: this.checkWarehouseGroup
      }
      this.$api.dataDetailSelectFinanceData(params).then(res => {
        this.purchaseAmount = res[0].dataCount === 0.01 ? 0 : res[0].dataCount;
        this.purchasePaidAmount = res[1].dataCount === 0.02 ? 0 : res[1].dataCount;
        this.storeNums = res[2].dataCount === 0.01 ? 0 : res[2].dataCount;
        this.materialGrossProfit = res[3].dataCount === 0.04 ? 0 : res[3].dataCount;
        this.saleAmount = res[4].dataCount === 0.05 ? 0 : res[4].dataCount;
      })
    },
    getInventoryAlarmList() {
      this.AlarmLoading = true
      this.$api.inventoryInventoryList({
        pageSize: 1000000,
        pageNumber: 1,
        materialName: "",
        warehouseId: this.chooseWareHouseId
      }).then(res => {
        let arr = [];
        res.rows.map(el => {
          if (!arr.includes(el.classificationId)) {
            arr = arr.concat([el.classificationId])
          }
        })
        let categroy = [];
        arr.map(el => {
          categroy = categroy.concat({ 'cateId': el, 'material': [] })
        })
        res.rows.map(el => {
          categroy.map(k => {
            if (el.classificationId === k.cateId) {
              k.name = el.name;
              k.material.push(el)
            }
          })
        })
        this.InventoryAlarmList = categroy;
        let nameMap = new Map()
        this.InventoryAlarmList.map(el => {
          el.inventoryStoreCount = new Decimal(0);
          el.allCount = 0;
          el.material.map(k => {
            el.allCount += k.count;
            el.inventoryStoreCount = Decimal(el.inventoryStoreCount).plus(Decimal(k.count).div(Decimal(k.material.storeAverageUseCount)).toFixed(0)).toNumber();
          })
          nameMap.set(el.name, el)
        })
        const showList = [
          '仓库门套',
          '仓库门扇',
          '仓库门锁',
          "收边条（白）15*15*3000",
          '收边条（黄）15*15*3000',
          '大直角20*40*2700',
          "踢脚线2400",
          "995黑色结构胶",
          "室外铝塑板填缝剂-哑光",
          "美缝剂",
          "地毯1600*800",
          "油漆（白）17L",
          "油漆（黄）1L",
          "收银台模型",
          "收银造型2200",
          "收银造型2600",
          "货架变压器",
          "防雨电源变压器（新）",
          "灯条400条/件",
          "灯条308条/件",
          "灯条396条/件（仅云南）",
          '碳晶板（黄）3000*1200*7.5',
          '碳晶板（黄）2850*1200*7.5',
          '碳晶板（白）3000*1200*7.5',
          '护墙板（白）2600*600*8',
          '长城板（黄）2600*205',
          '长城板（黄）3000*205',
          '白银灰铝塑板1220*2440',
          '室内地砖800*800',
          '室外地砖800*800',
        ]
        let result = showList.map(name => {
          return nameMap.get(name)
        }).filter(item => item !== undefined)
        this.InventoryAlarmList = result
        this.AlarmLoading = false
      })
    },
    chooseAlarmList(e) {
      this.chooseWareHouseId = e
      if (e == 1) this.warehouseName = '宁乡仓';
      if (e == 2) this.warehouseName = '广东仓';
      if (e == 4) this.warehouseName = '广西仓';
      if (e == 5) this.warehouseName = '云南仓';
      if (e == 7) this.warehouseName = '河南仓';
      if (e == 10) this.warehouseName = '重庆仓';
      if (e == 11) this.warehouseName = '贵州仓';
      this.getInventoryAlarmList()
    },
    getDataBar() {
      const params = {
        startTime: this.startTime,
        endTime: this.endTime
      }
      this.$api.dataDetailSelectIndexData(params).then(res => {
        this.elseCount = res.saleAndDjTotalList
        this.companyCdFeeList = res.companyCdFeeList
        this.gtcdFeeList = res.gtcdFeeList
        this.subFeeVOList = res.subFeeVOList
        this.profitCount = res.profitDivideList
        res.storeCountList.forEach(el => {
          el.transportCount = Decimal(Number(el.storeNameCount)).mul(Decimal(300)).toString()
        })
        res.profitDivideList.forEach(el => {
          if (el.dataName === '公司分0.6') {
            this.companyProfit = el.dataCount
          } else if (el.dataName === '门店补贴费') {
            this.storeSubsidy = el.dataCount
          } else if (el.dataName === '公司承担费') {
            this.companyProfitBear = el.dataCount
          }
          this.toCompany = Decimal(Number(this.companyProfit)).sub(Decimal(Number(this.storeSubsidy))).sub(Decimal(Number(this.companyProfitBear))).toString()
        })
        this.storeCount = res.storeCountList
        this.showData = false
      })
    }
  },
  created() {
    this.storeCountDate = '--至' + new Date().toLocaleDateString()
    const { userName = [] } =
    quinn.getStorage("userDatav3") || store.state.userData || {};
    this.userName = userName;
    this.getDataBar()
  },
  mounted() {
    this.getData();
    this.getInventoryAlarmList();
  }
}

</script>
<style lang="less" scoped>
.main /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: #ff6a00;
  color: white;
  box-shadow: -1px 0 0 0 white;
  border-color: #ff6a00 !important;
}

.main /deep/ .el-checkbox-button.is-focus .el-checkbox-button__inner {
  border-color: #ff6a00;
}

.main /deep/ .el-checkbox-button__inner:hover {
  // border-color: #ff6a00;
  color: #ff6a00
}

.main /deep/ .el-range-editor.is-active,
.el-range-editor.is-active:hover,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ff6a00;
}

.echartContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.countContainer {
  height: 150px;
  width: 100%;
  border: 0.5px solid #eee;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);

  div {
    padding: 20px;
    cursor: pointer;
  }
}

.countContainer > div:nth-child(2) {
  display: flex;
  justify-content: center;
}

.countContainer > div:nth-child(3) {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 0;
  color: #787878;
}

.countContainer > div:nth-child(3) > div:nth-child(2) {
  color: #F56C6C;
}

.echartContainer > div {
  height: 500px;
}

.main /deep/ .el-date-table td.today span {
  color: #ff6a00 !important;
}

.centerData {
  /deep/ .el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell {
    text-align: center !important;

  }
}
</style>
